<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        .box{
            position: relative;
            margin: 100px auto;
            height: 300px;
            width: 300px;
            border: 2px solid #ccc;
            border-radius: 50%;
        }
        .marks,.pointer,.center{
            position: absolute;
            top: 150px;
            left: 150px;
            transform: translate(-50%, -50%);
        }
        .center{
            width: 10px;
            height: 10px;
            background-color: #000;
            border-radius: 50%;
        }
        .marks li{
            position: absolute;
            top: 0;
            left: 0;
            width: 1px;
            height: 20px;
            margin-top: 130px;
            background-color: #000;
            transform-origin: center -130px;
        }
        .pointer li{
            position: absolute;
            top: 0;
            left: 0;
            transform: translate(-50%);
            background-color: #000;
            transform-origin: top center;
        }
        .pointer .pointerH{
            width: 4px;
            height: 60px;
            animation: move1 43200s linear infinite;
        }
        .pointer .pointerM{
            width: 3px;
            height: 90px;
            animation: move2 3600s steps(60) infinite;
        }
        .pointer .pointerS{
            width: 2px;
            height: 110px;
            animation: move3 60s steps(60) infinite;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="center"></div>
        <ul class="pointer">
            <li class="pointerH"></li>
            <li class="pointerM"></li>
            <li class="pointerS"></li>
        </ul>
        <ul class="marks">
        </ul>
    </div>
    
    <script src="../jquery/jquery.min.js"></script>
    <script>
        var str = '';
        var target = new Date('2020/7/21 12:00:00');
        // 动态生成表盘
        for (var i = 0; i < 12; i++) {
            str += '<li></li>';
        }
        $('.marks').html(str)

        // 设置表盘
        for (let i = 0; i < $('.marks li').length; i++) {
            var deg = 30 * i + 'deg';
            $('.marks li').eq(i).css('transform', `rotate(${deg})`)
        }
        // 设置起始位置
        var nowTime = new Date();
        var duration = nowTime - target;
        var timeS = 1000,
            timeM = 60*timeS,
            timeH = 60*timeM;
        var hour = -180+(duration/timeH)/12*360,
            minute = -180+(Math.floor(duration%timeH/timeM/60*360)),
            second = -180+(Math.floor(duration%timeM/timeS/60*360));
        
        // 动态添加动画
        animate('move1', hour);
        animate('move2', minute);
        animate('move3', second);

        function animate(name, start) {
            var style = document.styleSheets[0];
            style.insertRule(`@keyframes ${name} {
                from{
                    transform: rotate(${start}deg);
                }
                to{
                    transform: rotate(${start + 360}deg);
                }
            }`)
            // console.log(document.styleSheets[0]);            
        }
    </script>
</body>
</html>